<template>
  <van-swipe-cell :right-width="65" :on-close="onClose(shopCartListDataItem)">
    <div class="v-shopCart-productlist-item">
      <van-checkbox v-model="shopCartListDataItem.checked" @change="shopItemSelect(shopCartListDataItem)" ></van-checkbox>
      <van-card :title="shopCartListDataItem.productName" :desc="shopCartListDataItem.productDes" :num="shopCartListDataItem.productNum" :price="shopCartListDataItem.productPricle" :thumb="shopCartListDataItem.productImage">
        <div slot="footer">
          <van-stepper v-model="shopCartListDataItem.productNum" />
        </div>
      </van-card>
    </div>
    <span slot="right">删除</span>
  </van-swipe-cell>
</template>

<script>
  import {
    SwipeCell,
    CellGroup,
    Cell,
    Card,
    Stepper,
    Checkbox,
    Dialog 
  } from 'vant';
  import { mapGetters, mapActions } from 'vuex'
  export default {
    props:["shopCartListDataItem"],
    data() {
      return {
        value: 1,
        imageURL: require('../assets/img/yifu.jpg'),
        checked: false
      }
    },
    components: {
      [SwipeCell.name]: SwipeCell ,
      [CellGroup.name]: CellGroup,
      [Cell.name]: Cell,
      [Card.name]: Card,
      [Stepper.name]: Stepper,
      [Checkbox.name]: Checkbox,
      [Dialog.name]: Dialog 
    },
    methods: {
      shopItemSelect(item) {
        if (item.checked) {
          this.addProductToCart(item);
        }else{
           this.removeProductFromCart(item);
        }
      },
      ...mapActions('cart',{
        addProductToCart:'addProductToCart',
        removeProductFromCart:'removeProductFromCart',
        removeProduct:'removeProduct'
      }),
      onClose(item) {
        let that = this;
        return function(clickPosition, instance){
           switch (clickPosition) {
            case 'left':
            case 'cell':
            case 'outside':
              instance.close();
              break;
            case 'right':
              that.$dialog.confirm({
                message: '确定删除吗？'
              }).then(() => {
                that.removeProduct(item)
                instance.close();        
              }).catch(()=>{
                console.log('on cancel')
              });
              break;
          }
        }
      }
    }
  }
</script>

<style lang="scss">
  .v-shopCart-productlist-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    .van-card{
        flex: 1;
        margin-left: 10px;
        margin-top: 0;
        background-color: #fff;
        box-shadow: 5px 5px 10px #f2f2f2;
        width: calc(100% - 30px);
    }
  }
</style>